<#assign module="zhuanxian"/>

<@override name="header">
    <link rel="stylesheet" href="${ctx}/assets/css/datetimepicker.css">
<#--<link rel="stylesheet" href="${ctx}/assets/css/bootstrap-select.min.css">-->
    <link rel="stylesheet" href="${ctx}/assets/css/bootstrap-multiselect.css">
    <!-- import stylesheet -->
    <link rel="stylesheet" href="${ctx}/assets/js/iview/dist/styles/iview.css">
<#--    <link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">-->
    <style>
        /* autocomplete */
        div.ac {
            border: 1px solid #ccc;
            position: absolute;
            display: none;
            overflow: auto;
            background-color: #ffffff;
            z-index: 3000;
        }

        div.ac > ul {
            margin-top: 10px;
            padding: 0;
        }

        div.ac > ul > li {
            height: 33px;
            line-height: 33px;
            cursor: pointer;
        }

        div.ac > ul > li:hover {
            background: #eee;
        }

        div.ac > ul > li > div span {
            padding-left: 15px;
        }

        div.ac > ul > li > div span em {
            color: red;
            font-style: normal;
        }
    </style>
</@override>
<@override name="body">
    <div id="app">
        <div class="tabbable tabs-left">
            <div class="row">
                <div class="col-xs-12">
                    <@shiro.hasPermission name='addZXVehicle'>
                        <div class="orders-navh">
                            <template>
                                <Modal v-model="model" title="添加新车辆" z-index="1" footer-hide>
                                    <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                                        <form-item label="所属公司" prop="company">
                                            <i-select clearable v-model="formValidate.company">
                                                <i-option v-for="company in initData.companys" :value="company.value">
                                                    {{company.label}}
                                                </i-option>
                                            </i-select>
                                        </form-item>
                                        <form-item label="名称" prop="vehicleName">
                                            <i-input v-model="formValidate.vehicleName" placeholder="请输入车辆名称"></i-input>
                                        </form-item>
                                        <form-item label="行驶证(正)">
                                            <template>
                                                <div class="demo-upload-list" v-for="item in uploadList">
                                                    <template v-if="item.status === 'finished'">
                                                        <img :src="item.url">
                                                        <div class="demo-upload-list-cover">
                                                            <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
                                                            <Icon type="ios-trash-outline" @click.native="handleRemoveFront(item)"></Icon>
                                                        </div>
                                                    </template>
                                                    <template v-else>
                                                        <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                                                    </template>
                                                </div>
                                                <Upload
                                                    ref="upload"
                                                    disabled = "disabled"
                                                    :show-upload-list="false"
                                                    :on-success="handleSuccessFront"
                                                    :format="['jpg','jpeg','png']"
                                                    :max-size="2048"
                                                    multiple
                                                    :data="{'type':'front'}"
                                                    type="drag"
                                                    action="/vehicle/uploadDrivingLicense"
                                                    style="display: inline-block;width:58px;">
                                                    <div style="width: 58px;height:58px;line-height: 58px;">
                                                        <Icon type="ios-camera" size="20"></Icon>
                                                    </div>
                                                </Upload>
                                            </template>
                                        </form-item>
                                        <form-item label="行驶证(反)">
                                            <template>
                                                <div class="demo-upload-list" v-for="item in uploadBackList">
                                                    <template v-if="item.status === 'finished'">
                                                        <img :src="item.url">
                                                        <div class="demo-upload-list-cover">
                                                            <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
                                                            <Icon type="ios-trash-outline" @click.native="handleRemoveBack(item)"></Icon>
                                                        </div>
                                                    </template>
                                                    <template v-else>
                                                        <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                                                    </template>
                                                </div>
                                                <Upload
                                                    ref="uploadback"
                                                    disabled = "disabled"
                                                    :show-upload-list="false"
                                                    :on-success="handleSuccessBack"
                                                    :format="['jpg','jpeg','png']"
                                                    :max-size="2048"
                                                    multiple
                                                    :data="{'type':'back'}"
                                                    type="drag"
                                                    action="/vehicle/uploadDrivingLicense"
                                                    style="display: inline-block;width:58px;">
                                                    <div style="width: 58px;height:58px;line-height: 58px;">
                                                        <Icon type="ios-camera" size="20"></Icon>
                                                    </div>
                                                </Upload>
                                            </template>
                                        </form-item>
                                        <form-item label="号牌号码" prop="vehicleNumber">
                                            <i-input v-model="formValidate.vehicleNumber" placeholder="请输入车辆号牌号码"></i-input>
                                        </form-item>
                                        <form-item label="类型" prop="vehicleType">
                                            <i-input number v-model="formValidate.vehicleType" placeholder="请输入车辆类型"></i-input>
                                        </form-item>
                                        <form-item label="所有人" prop="vehicleOwner">
                                            <i-input v-model="formValidate.vehicleOwner" placeholder="请输入车辆所有人"></i-input>
                                        </form-item>
                                        <form-item label="品牌型号" prop="model">
                                            <i-input number v-model="formValidate.model" placeholder="请输入车辆品牌型号"></i-input>
                                        </form-item>
                                        <form-item label="识别号" prop="vehicleVIN">
                                            <i-input number v-model="formValidate.vehicleVIN" placeholder="请输入车辆识别代号"></i-input>
                                        </form-item>
                                        <form-item label="发动机号" prop="engineNo">
                                            <i-input number v-model="formValidate.engineNo" placeholder="请输入车辆发动机号"></i-input>
                                        </form-item>
                                        <form-item label="注册日期" prop="registerDate">
                                            <i-input number v-model="formValidate.registerDate" placeholder="请输入行驶证注册日期"></i-input>
                                        </form-item>
                                        <form-item label="发证日期" prop="issueDate">
                                            <i-input number v-model="formValidate.issueDate" placeholder="请输入行驶证发证日期"></i-input>
                                        </form-item>
                                        <form-item label="载客位数" prop="appprovedPassengerCapacity">
                                            <i-input number v-model="formValidate.appprovedPassengerCapacity" placeholder="请输入车辆载客位数"></i-input>
                                        </form-item>

                                        <form-item>
                                            <i-button type="primary" @click="handleSubmit('formValidate')">创建
                                            </i-button>
                                            <i-button @click="handleReset('formValidate')" style="margin-left: 8px">重置
                                            </i-button>
                                        </form-item>

                                    </i-form>
                                </Modal>
                                <Modal title="View Image" v-model="visible" z-index="2">
                                    <img :src="'http://192.168.110.145:8080/upload/drivingLicense/' + imgName " v-if="visible" style="width: 100%">
                                </Modal>
                            </template>

                        </div>
                    </@shiro.hasPermission>

                </div>
            </div>
        </div>

        <div class="tab-content">
            <div class="container-fluid ">
                <div class="row query-pad" style="margin-bottom: 10px; margin-top: 10px;">
                        <Row type="flex" justify="space-between" align="middle" >
                            <i-col span="1"> 所属公司：</i-col>
                            <i-col span="2">
                                <i-select clearable v-model="selectForm.companyId">
                                    <i-option v-for="company in initData.companys" :value="company.value">
                                        {{company.label}}
                                    </i-option>
                                </i-select>
                            </i-col>
                            <i-col span="1" offset="1"> 车 牌 号：</i-col>
                            <i-col span="2">
                                <i-input v-model="selectForm.vehicleNumber"></i-input>
                            </i-col>
                            <i-col span="1" offset="1">驾驶员姓名：</i-col>
                            <i-col span="2">
                                <i-input v-model="selectForm.driverName"></i-input>
                            </i-col>
                            <i-col span="1" offset="1">驾驶员电话：</i-col>
                            <i-col span="2">
                                <i-input v-model="selectForm.driverPhone"></i-input>
                            </i-col>
                            <i-col span="1" offset="3">
                                <i-button type="primary" @click="downloadExcel">下载模板</i-button>
                            </i-col>
                            <i-col span="2" >
                                <i-button type="primary" >批量导入车辆</i-button>
                            </i-col>
                        </Row>
                        <br/>
                        <Row type="flex" justify="center">
                            <i-col span="1">
                                <i-button type="primary" @click="queryVehicle">查询</i-button>
                            </i-col>
                            <i-col span="1">
                                <i-button type="primary" @click="model = true">创建车辆</i-button>
                            </i-col>
                            <i-col span="22"></i-col>
                        </Row>
                </div>
            </div>
        </div>
        <!--列表-->
        <div class="tabta-content">
            <i-table :height="pageHeight" :columns="vehicleColumn" :data="vehicleList"></i-table>
        </div>

    </div>

</@override>
<@override name="footer">
    <script type="text/javascript">
      var isMainCompany = false;
      <@shiro.isMainCompany>
      isMainCompany = true;
      </@shiro.isMainCompany>
    </script>
    <script src="${ctx}/assets/js/bootstrap-datetimepicker.min.js"></script>
    <script src="${ctx}/assets/js/bootstrap-datetimepicker.zh-CN.js"></script>
<#--    <script src="${ctx}/assets/js/zhuanxian/cars.js"/>-->
    <script src="${ctx}/assets/js/ajaxfileupload.js" ></script>
    <script src="${ctx}/assets/js/jquery.autocomplete.min.js"></script>
    <script src="${ctx}/assets/js/jquery.paging.min.js"></script>
    <script src="${ctx}/assets/js/utils/collections.js"></script>
    <script src="${ctx}/assets/js/bootstrap-multiselect.js"></script>
    <script type="text/javascript">
      new Vue({
        el: '#app',
        data() {
          const validateNumberOfPassenger = (rule, value, callback) => {
            if (!value) {
              return callback(new Error('载客位不能为空'));
            }
            // 模拟异步验证效果
            setTimeout(() => {
              if (!Number.isInteger(value)) {
                callback(new Error('请输入数字'));
              } else {
                if (value > 7) {
                  callback(new Error('输入数字过大'));
                } else {
                  callback();
                }
              }
            }, 500);
          };
          return {
            selectForm:{
              companyId: null,
              vehicleNumber: '',
              driverName: '',
              driverPhone: '',
            },
            pageHeight: 0,
            vehicleColumn: [
              {title: '车牌号', key: 'vehicleNumber', align: 'center'},
              {title: '车辆名称', key: 'vehicleName', align: 'center'},
              {title: '所有人', key: 'owner', align: 'center'},
              {title: '驾驶员', key: 'driver', align: 'center'},
              {title: '乘坐人数', key: 'passengerCapacity', align: 'center'},
              {title: '状态', key: 'status', align: 'center'}
            ],
            vehicleList: [],
            uploadUrl: '',
            model: false,
            disabled: false,
            initData: {
              companys: []
            },
            formValidate: {
              company: null,
              vehicleName: '',
              vehicleNumber: '',
              vehicleOwner: '',
              vehicleType: '',
              vehicleVIN: '',
              engineNo: '',
              registerDate: '',
              issueDate: '',
              model: '',
              appprovedPassengerCapacity: null,
            },
            ruleValidate: {
              company: [
                {required: true, message: '公司不能为空', trigger: 'blur'}
              ],
              vehicleName: [
                {required: true, message: '车辆名称不能为空', trigger: 'blur'}
              ],
              vehicleNumber: [
                {required: true, message: '车辆号牌不能为空', trigger: 'blur'}
              ],
              vehicleOwner: [
                {required: true, message: '车辆所有人不能为空', trigger: 'blur'}
              ],
              vehicleType: [
                {required: true, message: '车辆类型不能为空', trigger: 'blur'}
              ],
              model: [
                {required: true, message: '车辆品牌型号不能为空', trigger: 'blur'}
              ],
              vehicleVIN: [
                {required: true, message: '车辆识别号不能为空', trigger: 'blur'}
              ],
              engineNo: [
                {required: true, message: '发动机号不能为空', trigger: 'blur'}
              ],
              registerDate: [
                {required: true, message: '车辆注册日期不能为空', trigger: 'blur'}
              ],
              issueDate: [
                {required: true, message: '行驶证发证日期不能为空', trigger: 'blur'}
              ],
              appprovedPassengerCapacity: [
                {required: true, validator: validateNumberOfPassenger, trigger: 'blur'}
              ]
            },

            imgName: '',
            visible: false,
            uploadList: [],
            uploadBackList: [],
          }
        },
        mounted() {
          let vm = this;
          this.uploadList = this.$refs.upload.fileList;
          this.uploadBackList = this.$refs.uploadback.fileList;
          /** 设置表格高度 */
          this.pageHeight = document.body.clientHeight - 150;
          this.queryVehicle();
          $.ajax({
            url: '/vehicle/queryCompany',
            type: 'get',
            dataType: 'json',
            success: function(res) {
              $.each(res.data, function(i, item) {
                vm.initData.companys.push({value: item.id+'', label: item.companyName});
              })

            }
          })
        },
        watch: {
          uploadList(newData) {
            if(newData.length > 0){
              let vm = this;
              vm.disabled = true;
            }
          },
          uploadBackList(newData) {
            if(newData.length > 0){
              let vm = this;
              vm.disabled = true;
            }
          }
        },
        methods: {
          queryVehicle() {
            let vm = this;
            vm.vehicleList = [];
            $.ajax({
              url: '/vehicle/getVehiclesByParams',
              type: 'get',
              dataType: 'json',
              data: {
                'vehicleNumber': vm.selectForm.vehicleNumber,
                'companyId': vm.selectForm.companyId,
                'driverName': vm.selectForm.driverName,
                'driverPhone': vm.selectForm.driverPhone,
              },
              success: function(res) {
                $.each(res.data,function(i,item){
                  let vehicle = {'vehicleNumber':item.carNumber, 'vehicleName':item.carName, 'owner':item.companyName, 'passengerCapacity':item.appprovedPassengerCapacity};
                  vm.vehicleList.push(vehicle);
                })
              }
            })
          },
          downloadExcel() {
            // $.get("/vehicle/downloadExcel");
            window.open('/vehicle/downloadExcel','_blank');
          },
          clearInitData(type){
            let vm = this;
            if('front' == type){
              vm.formValidate.vehicleNumber = null;
              vm.formValidate.vehicleOwner = null;
              vm.formValidate.vehicleType = null;
              vm.formValidate.vehicleVIN = null;
              vm.formValidate.engineNo = null;
              vm.formValidate.registerDate = null;
              vm.formValidate.issueDate = null;
              vm.formValidate.model = null;
            }
            if('back' == type){
              vm.formValidate.appprovedPassengerCapacity = null;
            }
          },
          handleSubmit(name) {
            let vm = this;
            this.$refs[name].validate((valid) => {
              if (valid) {
                $.ajax({
                  url: '/vehicle/createVehicle',
                  type: 'post',
                  dataType: 'json',
                  data: {
                    'vehicleNumber': vm.formValidate.vehicleNumber,
                    'vehicleName': vm.formValidate.vehicleName,
                    'companyId': vm.formValidate.company,
                    'vehicleType': vm.formValidate.vehicleType,
                    'owner': vm.formValidate.vehicleOwner,
                    'model': vm.formValidate.model,
                    'appprovedPassengerCapacity': vm.formValidate.appprovedPassengerCapacity,
                    'engineNo': vm.formValidate.engineNo,
                    'registerDate': vm.formValidate.registerDate,
                    'issueDate': vm.formValidate.issueDate,
                    'vehicleVIN': vm.formValidate.vehicleVIN
                  }
                })
                this.model = false;
              } else {
                this.$Message.error('创建失败!');
              }
            })
          },
          handleReset(name) {
            this.$refs[name].resetFields();
          },

          handleView (name) {
            this.imgName = name;
            this.visible = true;
          },
          handleRemoveFront (file) {
            const fileList = this.$refs.upload.fileList;
            this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
            this.clearInitData('front');
          },
          handleRemoveBack(file) {
            const fileList = this.$refs.uploadback.fileList;
            this.$refs.uploadback.fileList.splice(fileList.indexOf(file), 1);
            this.clearInitData('back');
          },
          handleSuccessFront (res, file) {
            file.url = res.data.data.url;
            file.name = res.data.data.fileName;

            let vm = this;
            let results = res.data.data.results;
            let result = results[0];
            let licenseFrontInfo = result.vehicleLicenseFrontInfo;
            vm.formValidate.vehicleNumber = licenseFrontInfo.plateNum;
            vm.formValidate.vehicleOwner = licenseFrontInfo.owner;
            vm.formValidate.vehicleType = licenseFrontInfo.vehicleType;
            vm.formValidate.vehicleVIN = licenseFrontInfo.vin;
            vm.formValidate.engineNo = licenseFrontInfo.engineNum;
            vm.formValidate.registerDate = licenseFrontInfo.registerDate;
            vm.formValidate.issueDate = licenseFrontInfo.issueDate;
            vm.formValidate.model = licenseFrontInfo.model;
          },
          handleSuccessBack (res, file) {
            file.url = res.data.data.url;
            file.name = res.data.data.fileName;

            let vm = this;
            vm.formValidate.appprovedPassengerCapacity = res.data.data.results[0].vehicleLicenseBackInfo.appprovedPassengerCapacity;
          }
        }
      })
      var thisButton;

      function deleteCar() {
        $.get('${ctx}/zhuanxian/deleteCar', {
          'id': thisButton.attr("data-value"),
          'lineId': thisButton.attr("data-lineId")
        }, function (data) {
          if (data.success) {
            thisButton.parent().parent().remove();
            $.scojs_message('车辆删除成功', $.scojs_message.TYPE_OK);
            setTimeout(function () {
              window.location.reload(true);
            }, 800);
          } else {
            $.scojs_message(data.message, $.scojs_message.TYPE_ERROR);
          }
        }, 'json');
      }

      $(document).ready(function () {
        // $('#lineId').multiselect();
        $("#buyTime2").datetimepicker({
          format: 'yyyy-mm-dd',
          language: 'zh-CN',
          minView: 'month',
          pickDate: true,
          pickTime: false,
          inputMask: false,
          autoclose: true,
          endDate: new Date()
        });
        $("#insuranceTime2").datetimepicker({
          format: 'yyyy-mm-dd',
          language: 'zh-CN',
          minView: 'month',
          pickDate: true,
          pickTime: false,
          inputMask: false,
          autoclose: true,
          startDate: new Date()
        });
        $("#overhaulTime2").datetimepicker({
          format: 'yyyy-mm-dd',
          language: 'zh-CN',
          minView: 'month',
          pickDate: true,
          pickTime: false,
          inputMask: false,
          autoclose: true,
          startDate: new Date()
        });
        $("#buyTime").datetimepicker({
          format: 'yyyy-mm-dd',
          language: 'zh-CN',
          minView: 'month',
          pickDate: true,
          pickTime: false,
          inputMask: false,
          autoclose: true,
          endDate: new Date()
        });
        $("#insuranceTime").datetimepicker({
          format: 'yyyy-mm-dd',
          language: 'zh-CN',
          minView: 'month',
          pickDate: true,
          pickTime: false,
          inputMask: false,
          autoclose: true,
          startDate: new Date()
        });
        $("#overhaulTime").datetimepicker({
          format: 'yyyy-mm-dd',
          language: 'zh-CN',
          minView: 'month',
          pickDate: true,
          pickTime: false,
          inputMask: false,
          autoclose: true,
          startDate: new Date()
        });
        $(document).on("click", ".deletethis", function () {
          thisButton = $(this);
          var confirm = $.scojs_confirm({
            content: "你真的要删除该车辆吗？",
            action: deleteCar
          });
          confirm.show();
        });

        $('#employName').AutoComplete({
          'data': "${ctx}/zhuanxian/getDriver",
          ajaxDataType: 'json',
          ajaxParams: function (keyword) {
            return {'param': $('#employName').val()};
          },
          'width': 'auto',
          'async': false,
          'listStyle': 'custom',
          'emphasis': false,
          'matchHandler': function (keyword, data) {
            return true;
          },
          'createItemHandler': function (index, data) {
            return "<span>" + data.username + "    " + data.phone + "</span>";
          },
          'afterSelectedHandler': function (data) {
            $('#employName').val(data.username + "    " + data.phone);
            $('#employId').val(data.id);
          }
        }).AutoComplete('show');

        //添加车辆
        $(document).on("click", ".addCar", function () {
          // $('#lineId').multiselect('destroy');
          var company_id = $("#companyId").val();
          $.get('${ctx}/zhuanxian/queryLines', {'companyId': company_id}, function (data) {
            if (data.success) {
              $("#lineId").html("");
              if (data.lines != null && data.lines.length == 0) {
                $("#lineId").append("<option value=''>" + "该公司没有线路" + "</option>")
              } else {
                $(data.lines).each(function (index, element) {
                  var id = data.lines[index].id;
                  var typeName = data.lines[index].name;
                  var company_name = "";
                  if (data.company_main) {
                    company_name = "&emsp;&emsp;" + data.lines[index].companyName;
                  }
                  var text = "<option value=" + id + ">" + typeName + company_name + "</option>";
                  $("#lineId").append(text);
                });
                $('#lineId').multiselect({nonSelectedText: '请选择线路'});
                $('#lineId').multiselect('refresh');
              }
            } else {
              $.scojs_message(data.message, $.scojs_message.TYPE_ERROR);
            }

          }, 'json');
          $('#dialog_car').modal();
        });

        <#--            <@shiro.isMainCompany>-->
        <#--            window.setTimeout(function () {-->
        <#--                $("#companyId").change();-->
        <#--            }, 500);-->
        <#--            </@shiro.isMainCompany>-->
        //公司修改后对应的车辆类型也修改
        $("#companyId").change(function () {
          var company_id = $("#companyId").val();
          $("#carTypeId").html("");
          $.get('${ctx}/zhuanxian/queryLines', {'companyId': company_id}, function (data) {
            if (data.success) {
              lineData = data;
              $('#lineId').multiselect('destroy');
              console.log("test2");
              $("#lineId").html("");
              if (data.lines != null && data.lines.length == 0) {
                $("#lineId").append("<option value=''>" + "该公司没有线路" + "</option>")
              } else {
                $(data.lines).each(function (index, element) {
                  var id = data.lines[index].id;
                  var typeName = data.lines[index].name;
                  var company_name = "";
                  if (data.company_main) {
                    company_name = "&emsp;&emsp;" + data.lines[index].companyName;
                  }
                  var text = "<option value=" + id + ">" + typeName + company_name + "</option>";
                  $("#lineId").append(text);

                });
              }

            } else {
              $.scojs_message(data.message, $.scojs_message.TYPE_ERROR);
            }

          }, 'json');

        });

        $("#save").click(function () {
          var companyId = $('#companyId').val();
          var companyName = $('#companyId').find("option:selected").text();
          var carName = $('#carName').val();
          var carNumber = $('#carNumber').val();

          <@shiro.isMainCompany>
          if (!companyId) {
            $.scojs_message("请选择公司", $.scojs_message.TYPE_ERROR);
            return false;
          }
          </@shiro.isMainCompany>
          if (!carName.trim()) {
            $.scojs_message("请输入车辆名称", $.scojs_message.TYPE_ERROR);
            return false;
          }

          if (!carNumber.trim()) {
            $.scojs_message("请输入车牌号", $.scojs_message.TYPE_ERROR);
            return false;
          } else {
            if (!(/^([\u4e00-\u9fa5]{1}[A-z]{1}[A-z_0-9]{5})|([\u4e00-\u9fa5]{1}[A-z]{1}[A-z_0-9]{6})|([A-z]{1,2}[0-9]{4})$/.test(
                carNumber))) {
              $.scojs_message("车牌号格式不正确", $.scojs_message.TYPE_ERROR);
              return false;
            }
          }
          if (!$("#ridepeopleNumber").val().trim()) {
            $.scojs_message("请输入可乘坐人数", $.scojs_message.TYPE_ERROR);
            return false;
          } else {
            if (parseInt($("#ridepeopleNumber").val().trim()) > 100) {
              $.scojs_message("可乘坐人数过多", $.scojs_message.TYPE_ERROR);
              return false;
            }
          }
          if ($('#lineId').val() == "" || $('#lineId').val() == null) {
            $.scojs_message("请选择路线", $.scojs_message.TYPE_ERROR);
            return false;
          }
          if (($('#employName').val() != null && $('#employName').val() != "") && ($(
              '#employId').val() == null || $('#employId').val() == "")) {
            $.scojs_message("所选服务人员不存在", $.scojs_message.TYPE_ERROR);
            return false;
          }
          var lines = $('#lineId').val();
          var lineId = '';
          for (var i = 0; i < lines.length; i++) {
            lineId += lines[i];
            if (i != lines.length - 1) {
              lineId += ',';
            }
          }
          $.post('${ctx}/zhuanxian/createCar',
              {
                'companyId': companyId,
                'companyName': companyName,
                'carName': carName,
                'carNumber': carNumber,
                'lineId': lineId,
                'employId': $('#employId').val(),
                'employName': $('#employName').val(),
                'ridepeopleNumber': $("#ridepeopleNumber").val()
              },
              function (data) {
                if (data.success) {
                  $.scojs_message("创建成功", $.scojs_message.TYPE_OK);
                  $('#dialog_car').modal("hide");
                  setTimeout(function () {
                    window.location.reload(true);
                  }, 800);
                } else {
                  $.scojs_message(data.message, $.scojs_message.TYPE_ERROR);
                }
              }, 'json');
        });
        $("#close_modal").click(function () {
          $('#dialog_car').modal("hide");
        });
        //修改车辆
        $(document).on("click", ".updatethis", function () {

          var carId = $(this).attr("data-value");
          $("#carId").val(carId);
          $.ajax({
            type: "GET",
            url: "${ctx}/zhuanxian/queryCar",
            data: {id: carId},
            dataType: "json",
            success: function (object) {
              var vehicle = object.data;
              $("#carName2").val(vehicle.carName);
              $("#companyId2").val(vehicle.companyId);
              //	$("#companyId2").change();

              $.get('${ctx}/zhuanxian/queryLines', {'companyId': vehicle.companyId},
                  function (data) {
                    if (data.success) {
                      $("#lineId2").html("");
                      if (data.lines != null && data.lines.length == 0) {
                        $("#lineId2").append("<option value=''>" + "该公司没有线路" + "</option>")
                      } else {
                        var set = new Set();
                        if (vehicle.lines != null && vehicle.lines.length > 0) {
                          for (var i = 0; i < vehicle.lines.length; i++) {
                            set.add(vehicle.lines[i].id);
                          }
                        }
                        $(data.lines).each(function (index, element) {
                          var id = data.lines[index].id;
                          var typeName = data.lines[index].name;
                          var company_name = "";
                          if (data.company_main) {
                            company_name = "&emsp;&emsp;" + data.lines[index].companyName;
                          }
                          var text = '';
                          // debugger
                          if (set.contains(id)) {
                            text = '<option value= ' + id + ' selected = "true">' +
                                typeName + company_name + '</option>';
                          } else {
                            text = "<option value=" + id + ">" + typeName + company_name
                                + "</option>";
                          }
                          $("#lineId2").append(text);

                        });
                        $("#carNumber2").val(vehicle.carNumber);
                        // $("#lineId2").val(carId);
                        $("#employName2").val(vehicle.employName);
                        $("#employId2").val(vehicle.employId);
                        $("#ridepeopleNumber2").val(vehicle.ridepeopleNumber);
                        $("#status2").val(vehicle.status);
                        $('#lineId2').multiselect('refresh');
                      }

                    } else {
                      $.scojs_message(data.message, $.scojs_message.TYPE_ERROR);
                    }

                  }, 'json');

              setTimeout(function () {

              }, 400);

            }
          });

          $('#dialog_car_update').modal();
        });
        //公司修改后对应的车辆类型也修改
        $("#companyId2").change(function () {
          var company_id = $("#companyId2").val();
          $("#lineId2").html("");
          $.get('${ctx}/zhuanxian/queryLines', {'companyId': company_id}, function (data) {
            if (data.success) {
              console.log("test1");
              if (data.lines != null && data.lines.length == 0) {
                $("#lineId2").append("<option value=''>" + "该公司没有线路" + "</option>")
              } else {
                $(data.lines).each(function (index, element) {
                  var id = data.lines[index].id;
                  var typeName = data.lines[index].name;
                  var company_name = "";
                  if (data.company_main) {
                    company_name = "&emsp;&emsp;&emsp;&emsp;" + data.lines[index].companyName;
                  }
                  var text = "<option value=" + id + ">" + typeName + company_name + "</option>";
                  $("#lineId2").append(text);
                });
              }

            } else {
              $.scojs_message(data.message, $.scojs_message.TYPE_ERROR);
            }

          }, 'json');
        });
        $('#lineId2').change(function () {
          console.log($('#lineId2').val());
        })
        $("#update").click(function () {
          var companyId = $('#companyId2').val();
          var companyName = $('#companyId2').find("option:selected").text();
          var carName = $('#carName2').val();
          var carNumber = $('#carNumber2').val();
          <@shiro.isMainCompany>
          if (!companyId) {
            $.scojs_message("请选择公司", $.scojs_message.TYPE_ERROR);
            return false;
          }
          </@shiro.isMainCompany>
          if (!carName.trim()) {
            $.scojs_message("请输入车辆名称", $.scojs_message.TYPE_ERROR);
            return false;
          }
          if (!carNumber.trim()) {
            $.scojs_message("请输入车牌号", $.scojs_message.TYPE_ERROR);
            return false;
          } else {
            if (!(/^([\u4e00-\u9fa5]{1}[A-z]{1}[A-z_0-9]{5})|([\u4e00-\u9fa5]{1}[A-z]{1}[A-z_0-9]{6})|([A-z]{1,2}[0-9]{4})$/.test(
                carNumber))) {
              $.scojs_message("车牌号格式不正确", $.scojs_message.TYPE_ERROR);
              return false;
            }
          }
          if (!$("#ridepeopleNumber2").val().trim()) {
            $.scojs_message("请输入可乘坐人数", $.scojs_message.TYPE_ERROR);
            return false;
          } else {

            if (parseInt($("#ridepeopleNumber2").val().trim()) > 100) {
              $.scojs_message("可乘坐人数过多", $.scojs_message.TYPE_ERROR);
              return false;
            }
          }

          if ($('#lineId2').val() == "" || $('#lineId2').val() == null) {
            $.scojs_message("请选择路线", $.scojs_message.TYPE_ERROR);
            return false;
          }
          if (($('#employName2').val() != null && $('#employName2').val() != "") && ($(
              '#employId2').val() == null || $('#employId2').val() == "")) {
            $.scojs_message("所选服务人员不存在", $.scojs_message.TYPE_ERROR);
            return false;
          }
          var lines = $('#lineId2').val();
          var lineId = '';
          for (var i = 0; i < lines.length; i++) {
            lineId += lines[i];
            if (i != lines.length - 1) {
              lineId += ',';
            }
          }
          console.log(lines);
          $.post('${ctx}/zhuanxian/updateCar',
              {
                'carId': $("#carId").val(),
                'companyId': companyId,
                'companyName': companyName,
                'carName': carName,
                'carNumber': carNumber,
                'lineId': lineId,
                'status': $('#status2').val(),
                'employId': $('#employId2').val(),
                'employName': $('#employName2').val(),
                'ridepeopleNumber': $("#ridepeopleNumber2").val()
              },
              function (data) {
                if (data.success) {
                  $('#dialog_car_update').modal("hide");
                  $.scojs_message(data.message, $.scojs_message.TYPE_OK);
                  setTimeout(function () {
                    window.location.reload(true);
                  }, 500);
                } else {
                  $.scojs_message(data.message, $.scojs_message.TYPE_ERROR);
                }
              }, 'json');
        });

        $("#close_modal_update").click(function () {
          $('#dialog_car_update').modal("hide");
        });

        $('#employName2').AutoComplete({
          'data': "${ctx}/zhuanxian/getDriver",
          ajaxDataType: 'json',
          ajaxParams: function (keyword) {
            $('#employId2').val("");
            return {'param': $('#employName2').val()};
          },
          'width': 'auto',
          'async': false,
          'listStyle': 'custom',
          'emphasis': false,
          'matchHandler': function (keyword, data) {
            return true;
          },
          'createItemHandler': function (index, data) {
            return "<span>" + data.username + "    " + data.phone + "</span>";
          },
          'afterSelectedHandler': function (data) {
            $('#employName2').val(data.username + "    " + data.phone);
            $('#employId2').val(data.id);
          }
        }).AutoComplete('show');
      });

    </script>
    <style>
        .demo-upload-list {
            display: inline-block;
            width: 60px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            border: 1px solid transparent;
            border-radius: 4px;
            overflow: hidden;
            background: #fff;
            position: relative;
            box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
            margin-right: 4px;
        }

        .demo-upload-list img {
            width: 100%;
            height: 100%;
        }

        .demo-upload-list-cover {
            display: none;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, .6);
        }

        .demo-upload-list:hover .demo-upload-list-cover {
            display: block;
        }

        .demo-upload-list-cover i {
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            margin: 0 2px;
        }
    </style>
</@override>
<@extends name="../layout.ftl"/>
